<template>
  <div class="browser">
    <div class="browser_header">
      <Header />
    </div>
    <div class="search">
      <a-input-group compact>
        <a-input
          v-model:value="queryUrl"
          style="width: calc(100% - 31px)"
          @keyup.enter="query"
        />
        <a-button
          shape="circle"
          type="primary"
          :icon="h(SearchOutlined)"
          @click="query"
        />
      </a-input-group>
    </div>
    <div class="web_content">
      <iframe :src="currentUrl" frameborder="0"></iframe>
    </div>
  </div>
</template>
<script setup lang="ts">
import { SearchOutlined } from '@ant-design/icons-vue';
import Header from '@renderer/components/Header.vue';
import { ref, h } from 'vue';

const queryUrl = ref('');
const currentUrl = ref('');

const query = () => {
  currentUrl.value = queryUrl.value;
};
</script>
<style scoped lang="less">
.browser {
  width: 100%;
  height: 100%;
  .browser_header {
    height: 30px;
  }
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .web_content {
    width: 100%;
    height: calc(100% - 70px);
    > iframe {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
